<template>
  <div class="correct">
    <header-nav :leftArrow="true" titelText="消防安全检查意见书"></header-nav>

    <div class="correct-content">
      <div class="tip">根据模板填写，蓝色为必填，其他数据由程序生成</div>
      <div class="model">
        <div class="model-title" :style="openFlag ? 'border-bottom: 1px solid #f0f0f0;' : ''">
          <div>文件模版预览</div>
          <img v-if="openFlag" src="../../assets/images/modelOpen.png" alt="" @click="openFlag = false" />
          <img v-else src="../../assets/images/modelClose.png" alt="" @click="openFlag = true" />
        </div>
        <div class="model-text" v-if="openFlag">
          <div class="top">(此处印制消防救援机构名称)</div>
          <div class="modelTitle">
            公众聚集场所投入使用、营业前消防安全检查意见书
          </div>
          <div class="modelNumber">
            <span class="blue">_①_</span>
            <span>消安检字〔</span>
            <span class="blue">_②_</span>
            <span>〕第</span>
            <span class="blue">_③_</span>
            <span>号</span>
          </div>
          <div class="modelName">__________：</div>
          <div class="modelText">
            根据你单位（场所）关于（场所名称） （地址：______
            ）投入使用、营业前消防安全检查的申请，我支队于 ____年____月____
            日派员进行了消防安全检查。意见如下：
          </div>
          <div class="modelText">
            一、决定对你单位（场所）准予/不准予行政许可。
          </div>
          <div class="modelText">
            二、你单位（场所）应当遵守《中华人民共和国消防法》及其他有关消防法规、规章的规定，保证消防安全。
          </div>
          <div class="modelText">
            三、如场所名称、地址、消防安全责任人、使用性质等事项发生变化的，应当重新申请消防安全检查。
          </div>
          <div class="modelNumber">签收人：______</div>
          <div class="modelNumber">____年____月____日</div>
          <div class="modelNumber">（印章）</div>
          <div style="font-size: 14px; font-weight: 400; color: #4d4d4d">
            一式两份，一份交被检查单位（场所），一份存档。
          </div>
        </div>
      </div>

      <div class="content" :style="openFlag
        ? 'height: calc(100% - 300px);'
        : 'height: calc(100% - 160px);'
      ">
        <div class="content-title">内容填写</div>
        <div class="content-form">
          <div class="textBox">
            <div>
              <span style="color: #ee0a24; margin-right: 2px">*</span>
              <span style="font-size: 20px">①</span>
            </div>
            <van-field v-model="wsForm.shortName" required maxlength="16" placeholder="请输入消防救援机构名称"
              style="padding: 0 20px" />
          </div>
          <div class="textBox">
            <div>
              <span style="color: #ee0a24; margin-right: 2px">*</span>
              <span style="font-size: 20px">②</span>
            </div>
            <van-field v-model="wsForm.charName" required maxlength="16" placeholder="请输入记录表字"
              style="padding: 0 20px" />
          </div>
          <div class="textBox">
            <div>
              <span style="color: #ee0a24; margin-right: 2px">*</span>
              <span style="font-size: 20px">③</span>
            </div>
            <van-field v-model="wsForm.numberName" required maxlength="16" placeholder="请输入记录表号"
              style="padding: 0 20px" />
          </div>
        </div>
        <div class="checkBox">
          <van-button block type="primary" @click="submit()"> 保存 </van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { showNotify, showSuccessToast, showFailToast } from 'vant'
const { usePublic } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const openFlag = ref(true)

const wsForm = reactive({
  id: id.value,
  shortName: '',
  charName: '',
  numberName: '',
  type: 9,
})

const submit = async () => {
  if (wsForm.shortName == '') {
    return showNotify({ type: 'danger', message: '请输入消防救援机构名称' })
  } else if (wsForm.charName == '') {
    return showNotify({ type: 'danger', message: '请输入记录表字' })
  } else if (wsForm.numberName == '') {
    return showNotify({ type: 'danger', message: '请输入记录表号' })
  }
  const res = await usePublic.docProduct(wsForm)
  if (res.code == 0) {
    showSuccessToast('制作成功')
    router.go(-1)
  } else {
    showFailToast(res.message)
  }
  console.log(wsForm)
}
</script>

<style lang="scss" scoped>
.correct {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #1764ce;

  .correct-content {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    margin-top: 46px;

    .tip {
      padding: 11px 16px;
      background-color: rgba(254, 241, 230, 1);
      color: #fc770a;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20px;
    }

    .model {
      margin: 10px 8px;
      background-color: #ffffff;
      border-radius: 8px;

      .model-title {
        padding: 16px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >img {
          width: 20px;
          height: 20px;
        }

        >div {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 24px;
          color: #4d4d4d;
        }
      }

      .model-text {
        max-height: 300px;
        overflow-y: auto;
        padding: 16px 12px 12px 12px;

        .top {
          text-align: center;
        }

        .modelTitle {
          margin: 8px 0;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #000000;
        }

        .modelNumber {
          text-align: right;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #4d4d4d;
        }

        .modelName {
          text-align: left;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          margin: 8px 0;
        }

        .modelText {
          text-align: left;
          text-indent: 2em;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #4d4d4d;
        }
      }
    }

    .content {
      overflow-y: auto;
      background-color: #ffffff;
      border-radius: 8px 8px 0 0;

      .content-title {
        padding: 16px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        border-bottom: 1px solid #f0f0f0;
      }

      .content-form {
        .textBox {
          display: flex;
          align-items: center;
          padding: 16px;
          border-bottom: 1px solid #f5f5f5;

          >div {
            line-height: 24px;
            font-size: 16px;
            color: #1764ce;
          }
        }
      }
    }
  }

  .checkBox {
    margin: 0 16px;
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #f5f5f5;
  }
}

.blue {
  color: #1764ce;
  // text-decoration: underline;
}

.num {
  font-size: 16px;
  font-weight: 500;
  color: #666666;
}

.num2 {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}

.line10 {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}
</style>
